<template>
  <div class="grid_cont" v-loading="loading" element-loading-text="Loading...">
    <div style="display:flex;">
      <div style="width: 3px;height: 18px;background-color: rgba(204,53,47,1);"></div>
      <div style="margin-left:10px;font-size: 16px;line-height: 16px;">详情</div>
    </div>
    <div style="width: 100%;height: 1px;background-color:rgba(245,245,245,1);margin-top:16px;margin-bottom:20px;">
    </div>
    <div class="detail_cont">
      <div class="decont_top">
        <div style="min-width: 70px;margin-left:42px;font-weight: 550;">景点照片：</div>
        <div class="contpt">
          <div v-if="list && list.fileDOList && list.fileDOList.length > 0">
            <el-row :gutter="10">
              <div v-for="(item, index) in list.fileDOList" :key="index" class="ptlist">
                <el-col :span="24">
                  <UploadImg disabled v-model="item.url" :limit="1" height="120px" width="120px" />
                </el-col>
              </div>
            </el-row>
          </div>
          <el-upload v-else disabled class="avatar-uploader"
            style="position:relative;line-height: 0px !important;margin-bottom:8px;">
            <el-icon disabled class="avatar-uploader-icon" />
            <div style="position:absolute;cursor: not-allowed;user-select: none;color: #999;">暂无图片</div>
          </el-upload>
        </div>
      </div>
      <div class="decont_top">
        <div style="min-width:70px;margin-left:42px;font-weight: 550;">景点名称：</div>
        <div>{{ list.scenicName }}</div>
      </div>
      <div class="decont_top decont_top2">
        <div style="min-width: 70px;margin-left:42px;margin-right:5px;font-weight: 550;">景点标签：</div>
        <el-row :gutter="10">
          <div v-for="(item, index) in list.scenicLabel" :key="index" class="identity_style">
            <el-col :span="24">
              <div>{{ item }}</div>
            </el-col>
          </div>
        </el-row>
      </div>
      <div class="decont_top">
        <div style="min-width: 70px;margin-left:42px;font-weight: 550;">景点地址：</div>
        <div>{{ list.scenicAddr }}</div>
      </div>
      <div class="decont_top">
        <div style="min-width: 70px;margin-left:42px;font-weight: 550;">开放时间：</div>
        <div>{{ list.openTime }}</div>
      </div>
      <div class="decont_top decont_top2">
        <div style="min-width: 70px;font-weight: 550;">人均消费（元）：</div>
        <div>{{ list.consumption }}</div>
      </div>
      <div class="decont_top decont_top2">
        <div style="min-width: 70px;margin-left:42px;font-weight: 550;">联系电话：</div>
        <div>{{ list.phone }}</div>
      </div>
      <div class="decont_top" style="display: block;">
        <div style="min-width: 70px;margin-left:42px;font-weight: 550;">景区简介：</div>
        <div style="max-width:600px;line-height:30px;justify-Content: space-around;margin-left:42px;">{{
          list.introduction }}
        </div>
      </div>
      <div class="decont_top" style="display: block;">
        <div style="min-width: 70px;margin-left:42px;font-weight: 550;">旅游攻略：</div>
        <div style="max-width:600px;line-height:30px;justify-Content: space-around;margin-left:42px;"
          v-html="list.travelGuide ? list.travelGuide : '暂无'"></div>
      </div>
    </div>
  </div>
  <div class="grid_cont2">
    <el-button class="grid_btn" @click="detailsbtn()">返回</el-button>
  </div>
</template>

<script lang="ts" setup>
import * as getTouristcenterApi from '@/api/appManagement/touristcenterManagement/index'
const { push } = useRouter() // 路由
const route = useRoute()
const list = ref({})
const loading = ref(true) // 加载中
/** 返回 */
const detailsbtn = () => {
  localStorage.setItem('tabactiveName', JSON.stringify('first'))
  push({
    name: 'touristcenterManagement'
  })
}
const getData = () => {
  getTouristcenterApi.getScenicspotdetail(route.query.id).then((res) => {
    loading.value = false
    let data = reactive(res)
    data.scenicLabel = data.scenicLabel.split(',')
    data.fileDOList = data.fileDOList.reverse()
    list.value = data;
  }).catch(error => {
    loading.value = false
  })
}

onMounted(() => {
  getData()
})

</script>
<style scoped>
.grid_cont {
  min-height: 600px;
  background: #fff;
}

.grid_cont2 {
  width: 100%;
  background: #fff;
  height: 65px;
  justify-Content: center;
  align-items: center;
  display: flex;
  padding: 0;
  box-shadow: 0px -2px 6px 0px rgba(188, 188, 188, 0.65);
}

.grid_btn {
  width: 80px;
  height: 30px;
  background-color: #FF9900;
  border: none;
  color: #fff;
}

.detail_cont {
  padding-left: 10px;
  line-height: 30px;
  margin-bottom: 30px;
}

.decont_top {
  display: flex;
  font-size: 14px;
  color: var(--el-text-color-regular);
  margin-top: 10px;
  margin-bottom: 10px;
}

.ptlist {
  margin-bottom: 10px;
}

.contpt {
  margin-top: 8px;
  margin-left: 42px;
}

.decont_top:first-child {
  margin-bottom: 0 !important;
  display: block;
}

.decont_top:nth-child(2) {
  margin-top: 0 !important;
}

.grid_btn:hover {
  opacity: 0.8;
}

::v-deep .avatar-uploader .el-upload {
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  cursor: not-allowed;
}

::v-deep .el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
  cursor: not-allowed;
  background-color: var(--el-disabled-bg-color);
}

::v-deep.avatar-uploader .el-upload-list {
  display: none !important;
}

.identity_style {
  min-width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 5px;
  padding: 0 5px;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  border: 1px solid #CB1212;
  color: #D30E0E;
  font-weight: 550;
}

.decont_top:nth-child(3) {
  margin-bottom: 0 !important;
}

.decont_top:nth-child(4) {
  margin-top: 0 !important;
}

.identity_style:hover {
  opacity: 0.8;
}

::v-deep .upload .el-upload .el-upload-dragger {
  border: 1px solid var(--el-border-color-darker) !important;
}

::v-deep .upload .el-upload .el-upload-dragger:hover {
  border: 1.5px solid #ccc !important;
}

::v-deep .upload-box .el-upload__tip {
  display: none;
}

@media (min-width: 832px) and (max-width: 1000px) {
  .detail_cont {
    padding-left: 10px;
  }
}

@media (max-width: 770px) {
  .decont_top2 {
    display: flex !important;
  }
}
</style>